<template>
  <div class="concessionAcceptDetails h100">
    <editPageNew
      ref="editPage"
      :rightBtnArr="rightBtnArr"
      :stepConfig="stepConfig"
      :moreBtnArr="moreBtnArr"
      showStep
      showTopTitle
      :showMore="showMore"
      :creatInfo="formData"
    >
      <template slot="editPageTitle">
        <i class="el-icon-document TitleImg"></i>
        让步接收单 {{formData.code}}
      </template>
      <div class="orderTitle" :class="{redLine:!orderTitle}">
        <div class="tipText">标题自动生成规则：{关联工单的标题}+让步接收</div>
        <div v-show="!showInput" class="name">
          <span style="color: red"></span>
          <span>{{ orderTitle }}</span>
          <el-link
            v-show="!baseAttachBtn"
            style="font-size: 20px"
            icon="el-icon-edit-outline"
            @click="editTitle"
          ></el-link>
        </div>
        <div v-show="showInput" class="name-input">
          <el-input
            type="text"
            v-model="orderTitle"
            @blur="loseFocus"
            @change="userInputTitle"
            placeholder="请输入名称"
            clearable
            ref="mark"
          >
            <template slot="prepend" style="color: red">标题</template>
          </el-input>
        </div>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">基本信息</template>
          <editForm :formConfig="editFormConfig" ref="basicForm" :formData="formData">
            <!-- 工单选择 -->
            <template #orderCode="{editFormInfo}">
              <el-input
                v-model="editFormInfo.orderCode"
                size="mini"
                class="input-with-select input-link"
                readonly
                :disabled="disabled"
                placeholder="请选择工单"
                @click.native="showOrder()"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  :disabled="disabled"
                  @click.stop="()=>chooseOrder('order')"
                ></el-button>
              </el-input>
            </template>
            <!-- 重大问题单选择 -->
            <template #questionId="{editFormInfo}">
              <el-input
                v-model="editFormInfo.questionId"
                size="mini"
                class="input-with-select"
                readonly
                :disabled="disabled"
                placeholder="请选择重大问题单"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  :disabled="disabled"
                  @click="()=>chooseOrder('question')"
                ></el-button>
              </el-input>
            </template>
            <!-- 影响及预防 -->
            <template #concessionInfluencePoList="{ editFormInfo }">
              <editTableNew
                :tableSetting="preventSetting"
                :hideBtn="disabled"
                :tableData="editFormInfo.concessionInfluencePoList"
                ref="preventTable"
              ></editTableNew>
            </template>
          </editForm>
          <div class="attachConten">
            <div class="attachTitle">附件:</div>
            <div class="tebleDiv">
              <attachFormNew
                style="width: 60%"
                :disabled="baseAttachBtn"
                :attachSetting="attachSetting"
                isDelete
                multiple
                ref="attachFile"
              ></attachFormNew>
            </div>
          </div>
        </el-collapse-item>
        <div v-if="showWorkFlow">
          <el-collapse-item name="2">
            <template slot="title">审核信息</template>
            <workFlow
              ref="workFlow"
              v-if="showWorkFlow"
              :isDetails="pageType == 'query'"
              :currentFlowData="formData"
              @submitSuccess="workFlowSuccess"
              workflowCode="concession_accept_review"
            ></workFlow>
          </el-collapse-item>
        </div>
      </el-collapse>
    </editPageNew>
    <dialogPublic
      :title="'审核信息'"
      :show.sync="showFlowDialog"
      noFootBtn
      appendTobody
      fullscreen
      @doClose="() => (showFlowDialog = false)"
    >
      <workFlow
        v-if="showFlowDialog"
        :isDetails="pageType == 'query'"
        :currentFlowData="formData"
        @submitSuccess="workFlowSuccess"
        workflowCode="concession_accept_review"
      ></workFlow>
    </dialogPublic>
    <dialogPublic
      :title="'选择关联工单'"
      :show.sync="showWorkOrder"
      @doSubmit="selectOrders"
      @doClose="() => (showWorkOrder = false)"
      appendTobody
      fullscreen
    >
      <div v-if="showWorkOrder" class="h100">
        <workorder ref="defectOrders" v-if="dialogType == 'order'"></workorder>
        <majorIssues
          v-else
          ref="defectOrders"
          showType="query"
          :orderCode="orderCode"
          :selectCode="questionCode"
        ></majorIssues>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import {
  insertOrUpdateApi, //新增
  deleteApi, //删除
  getDetailsApi //获取详情
} from "@/api/orderManagement/concessionAccept";
import {
  getOrderDictionApi, //权限
} from "@/api/orderManagement/common";
import { queryPageList } from "@/api/orderManagement/orderCommon";
import workorder from "@/views/orderManagement/majorIssues/orderList"; //工单选择
import majorIssues from "@/views/orderManagement/majorIssues/index"; //问题单选择
export default {
  components: {
    workorder,
    majorIssues
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      pageType: "",
      dialogType: "",
      status: "",
      orderCode: "",
      questionCode: "",
      associatedTitle: "", //关联工单的标题
      disabled: false,
      showMore: false,
      orderTitle: "",
      showInput: false,
      showWorkOrder: false,
      showFlowDialog: false,
      activeNames: ["1"],
      btnJurisdiction: [],
      formData: {},
      contactObj: {},
      selectOrder: {},
      workFlowData: {},
      editFormConfig: {
        itemArr: [
          {
            type: "text",
            label: "关联工单:",
            prop: "orderCode",
            placeholder: "请选择工单",
            required: true,
            span: 8
          },
          {
            label: "设备所属部门:",
            prop: "deptManageName", //多选时，字段要为数组类型
            propArr: "deptManageArr",
            idsStr: "deptManage",
            multiple: false, //是否多选
            isOutOrg: 0, //是否是外单位
            allowCreate: false, //是否允许创建条目
            option: [], //当前选中的项
            type: "dept-select", //类型
            trigger: "change",
            required: true,
            methods: obj => {},
            span: 8
          },
          {
            label: "设备所属部门负责人:",
            prop: "leaderName", //多选时，字段要为数组类型
            propArr: "leaderArr",
            idsStr: "leader",
            multiple: false, //是否多选
            isOutOrg: 0, //是否是外单位
            allowCreate: false, //是否允许创建条目
            option: [], //当前选中的项
            type: "user-select", //类型
            trigger: "change",
            required: true,
            methods: obj => {},
            span: 8
          },
          {
            label: "问题描述:",
            prop: "question",
            type: "textarea",
            maxlength: "500",
            required: true,
            methods: obj => {},
            span: 12,
            rows: 7
          },
          {
            label: "无法解决的原因:",
            prop: "reason",
            type: "textarea",
            maxlength: "500",
            required: true,
            methods: obj => {},
            span: 12,
            rows: 7
          },
          {
            label: "影响及预防",
            prop: "concessionInfluencePoList",
            otherInfo: "table",
            span: 24
          },
          {
            label: "联系人:",
            prop: "contactName", //多选时，字段要为数组类型
            propArr: "contactArr",
            idsStr: "contactId",
            multiple: false, //是否多选
            isOutOrg: 0, //是否是外单位
            allowCreate: true, //是否允许创建条目
            option: [], //当前选中的项
            type: "user-select", //类型
            trigger: "change",
            methods: obj => {
              let { name, id, orgId, orgName, isOutOrg } = obj[0];
              this.contactObj = {
                contactDeptName: orgName,
                contactDeptId: orgId,
                contactType: this.$utils.changeUserType(isOutOrg)
              };
            },
            required: true,
            span: 8
          },
          {
            type: "text",
            label: "联系电话:",
            prop: "phone",
            placeholder: "请输入联系人",
            required: true,
            methods: obj => {},
            span: 8
          },
          {
            type: "text",
            label: "申请人:",
            prop: "createByName",
            idsStr: "createBy",
            required: true,
            disabled: true,
            span: 8
          },
          {
            label: "申请单位:",
            prop: "deptName",
            idsStr: "deptId",
            type: "text",
            required: true,
            disabled: true,
            span: 8
          },
          {
            type: "datetime",
            label: "申请时间:",
            prop: "createTime",
            required: true,
            disabled: true,
            span: 8
          },
          {
            type: "text",
            label: "关联重大问题单:",
            prop: "questionId",
            span: 8
          },
          {
            type: "select",
            label: "文件清单:",
            prop: "file",
            selectOption: this.$store.getters["dirtData"](
              "concession_file_type"
            ),
            formatter: val => {
              return this.$store.getters["fineDirtDataName"](
                "concession_file_type",
                val
              );
            },
            span: 8
          }
        ]
      },
      preventSetting: {
        title: "影响及预防：",
        select: false,
        maxHeight: "100%",
        btnArr: ["add"], //"edit",
        hideBtn: false,
        buttonArr: [
          {
            name: "删除",
            isShow: (row, index) => {
              return true;
            },
            methods: (row, index) => {
              this.deletRow(row, index, "workList");
            }
          }
        ],
        data: [],
        column: [
          {
            label: "对系统的影响",
            prop: "context",
            type: "textarea", //disableText
            autosize: true
          },
          {
            label: "运行注意事项",
            prop: "note",
            type: "textarea",
            autosize: true
          }
        ]
      },
      //附件设置
      attachSetting: {
        businessId: "", //单据的ID
        businessType: "base"
      },
      orderStatus: ["DRAFT", "WAIT_REVIEW", "REVIEWED"]
    };
  },
  computed: {
    // 配置进度
    stepConfig() {
      let step = this.orderStatus.indexOf(this.status);
      let obj = {
        nowStep: parseInt(step), //当前步骤，对应stepItem数组的下标，例如：0-步骤一、1-步骤二
        stepItem: ["草稿", "待审核", "已审批"]
      };
      return obj;
    },
    // 配置进度右边按钮
    rightBtnArr() {
      let arr = [
        {
          text: "保存",
          icon: "el-icon-check",
          hide: ["WAIT_REVIEW", "REVIEWED"].includes(this.status),
          methods: () => {
            this.doSubmit("save");
          },
          content: this.$store.getters["isBtnAuth"]("edit")
            ? null
            : "未授权此功能！",
          disabled: !this.$store.getters["isBtnAuth"]("edit")
        },
        {
          text: "提交",
          icon: "el-icon-position",
          hide: ["WAIT_REVIEW", "REVIEWED"].includes(this.status),
          methods: () => {
            this.doSubmit("submit");
          },
          content: this.$store.getters["isBtnAuth"]("edit")
            ? null
            : "未授权此功能！",
          disabled: !this.$store.getters["isBtnAuth"]("edit")
        },
        {
          text: "删除",
          icon: "el-icon-delete",
          hide: this.status != "DRAFT",
          methods: () => {
            this.deleteData();
          },
          content: this.$store.getters["isBtnAuth"]("delete")
            ? null
            : "未授权此功能！",
          disabled: !this.$store.getters["isBtnAuth"]("delete")
        }
      ];
      return arr;
    },
    moreBtnArr() {
      let arr = [
        {
          text: "操作记录",
          methods: () => {
            this.$refs.editPage.showOperate();
          },
          hide: this.status == ""
        }
        // {
        //   text: "打印预览",
        //   methods: () => {
        //     this.toPrint();
        //   },
        //   hide: ["", "DRAFT", "IN_EXECUTE", "WAIT_ACCEPT"].includes(
        //     this.status
        //   )
        // }
      ];
      return arr;
    },
    hideBtn() {
      return ["WAIT_REVIEW", "REVIEWED"].includes(this.status);
    },
    showWorkFlow() {
      return (
        ["WAIT_REVIEW", "REVIEWED"].includes(this.status) &&
        this.pageType != "add"
      );
    },
    baseAttachBtn() {
      if (["DRAFT", ""].includes(this.status) && this.pageType != "details") {
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {
    status: {
      handler(val) {
        if (val == "") {
          this.showMore = false;
        } else {
          this.showMore = true;
        }
        switch (val) {
          case "DRAFT":
            this.activeNames = ["1"];
            break;
          case "WAIT_REVIEW":
            this.activeNames = ["2"];
            break;
          case "REVIEWED":
            this.activeNames = ["1", "2"];
            break;
          default:
            this.activeNames = ["1"];
            break;
        }

        if (
          ["WAIT_REVIEW", "REVIEWED", "DEPRECATED"].includes(val) ||
          this.pageType == "details"
        ) {
          let itemArr = [];
          //深度拷贝数组对象(可拷贝函数)
          $.extend(true, itemArr, this.editFormConfig.itemArr);
          itemArr.map(i => (i.disabled = true));
          this.disabled = true;
          this.editFormConfig.itemArr = itemArr;
        }
      }
    },
    associatedTitle: {
      handler(val) {
        if (!this.userInput) {
          this.orderTitle = val + "让步接收";
        }
      }
    }
  },
  created() {},
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      let { id, pageType } = this.$route.query;
      this.pageType = pageType;
      if (id) {
        this.formData.id = id;
        //初始化附件ID
        this.attachSetting.businessId = id;
        //判断页面类型
        let haveJurisdiction = this.$store.getters["isBtnAuth"]("edit");
        this.pageType = haveJurisdiction ? "edit" : "details";

        this.getDetails();
      } else {
        //新建
        /* 数据初始化 */
        this.showInput = true;
        let { name, account, deptId, deptName, phone } = this.userInfo;
        let contactOption = this.$utils.getOptionData(name, account, "0");
        this.$refs.basicForm.setItemOption("contactName", contactOption);
        this.formData = {
          id: this.$route.query.id,
          contactName: name, //联系人
          contactId: account, //联系人
          contactArr: account, //联系人
          phone: phone, //联系电话
          createByName: name, //申请人
          createBy: account, //申请人
          deptName: deptName, //申请单位
          deptId: deptId, //申请单位
          createTime: this.$utils.getCurrentDate() //申请时间
        };
        if (this.pageType == "orderAdd") {
          this.orderId = this.$route.query.orderId;
          this.getOrderInfo();
        }
      }
    },
    //获取页面权限
    jurisdiction() {
      let form = {
        orderId: this.formData.id,
        orderStatus: this.status,
        orderType: 'concession',
      };
      getOrderDictionApi(form).then((res) => {
        let data = res.data;
        if (Array.isArray(data)) {
          this.btnJurisdiction = data;
        } else {
          this.btnJurisdiction = [];
        }
        this.changePageType();
      });
    },
    changePageType() {
      let status = this.status || "";
      //用户角色权限
      let userJurisdiction = this.$store.getters["isBtnAuth"]("edit");
      //业务控制权限
      let businessJurisdiction = this.$utils.getJurisdiction(
        this.btnJurisdiction,
        "save"
      );
      let haveJurisdiction = userJurisdiction && businessJurisdiction;
      //确定pageType类型
      if (haveJurisdiction && status == "DRAFT") {
        this.editFormConfig.itemArr.map(item=>{
          if (!['createByName','deptName','createTime'].includes(item.prop)) {
            item.disabled = false;
          }
        })
      } else {
        this.editFormConfig.itemArr.map(item=>{
          item.disabled = true;
        })
      }
    },
    getDetails(id) {
      this.showInput = false;
      let dataId = id ? id : this.formData.id;
      getDetailsApi(dataId).then(res => {
        let data = res.data || {};
        this.orderTitle = data.title;
        this.orderCode = data.orderCode;
        this.orderId = data.orderId;
        this.questionCode = data.questionId;
        this.status = data.status;
        this.selectOrder = {
          id: data.orderId,
          code: data.orderCode,
          orderType: data.orderType
        };
        this.jurisdiction();
        /* 影响及预防的数据 */
        // this.$refs.preventTable.setTableData(data.concessionInfluencePoList);
        let {
          deptManage,
          deptManageName,
          leaderName,
          leader,
          contactName,
          contactId
        } = data;
        /* 所属部门 */
        data.deptManageArr = data.deptManage;
        let deptOption = this.$utils.getOptionData(
          deptManageName,
          deptManage,
          "0"
        );
        /* 设备所属部门负责人 */
        data.leaderArr = data.leader;
        let leaderOption = this.$utils.getOptionData(leaderName, leader, "0");
        /* 联系人 */
        data.contactArr = data.contactName;
        let contactOption = this.$utils.getOptionData(
          contactName,
          contactId,
          "0"
        );
        this.formData = data;
        setTimeout(() => {
          if (this.$refs.basicForm) {
            this.$refs.basicForm.setItemOption("deptManageName", deptOption);
            this.$refs.basicForm.setItemOption("leaderName", leaderOption);
            this.$refs.basicForm.setItemOption("contactName", contactOption);
          }
        }, 100);
      });
    },
    getOrderInfo() {
      let form = {
        id: this.orderId
      };
      queryPageList(form).then(res => {
        let data = res.data.list || [];
        let { id, title, code, deptManageName, deptManage } = data[0];
        this.selectOrder = data[0];
        this.associatedTitle = title;
        this.orderCode = code;
        this.orderId = id;
        this.$refs.basicForm.setFormItem("orderCode", code);
        /* 设备所属部门 */
        this.$refs.basicForm.setFormItem("deptManageName", deptManageName);
        this.$refs.basicForm.setFormItem("deptManage", deptManage);
        this.$refs.basicForm.setFormItem("deptManageArr", deptManage);
        let deptOption = this.$utils.getOptionData(
          deptManageName,
          deptManage,
          "0"
        );
        this.$refs.basicForm.setItemOption("deptManageName", deptOption);
      });
    },
    async doSubmit(type) {
      let status = this.status;
      let data = {};
      if (this.orderTitle == "") {
        this.$message.warning("请填写标题，再保存！");
      } else {
        //基本信息的保存
        //新增或者草稿状态时，保存缺陷-基本信息，提交缺陷-基本信息
        data = await this.$refs.basicForm.getFormData();
        data.concessionInfluencePoList = await this.$refs.preventTable.getTableData();
        data.title = this.orderTitle;
        data.orderId = this.selectOrder.id;
        data.orderType = this.selectOrder.orderType;
        data.isCommit = false;
        delete data.deptManageArr;
        delete data.leaderArr;
        delete data.contactArr;
        if (type == "submit") {
          this.$confirm(`提交后数据将会自动保存，是否继续`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.submitOrder(data, type);
            })
            .catch(e => {});
        } else {
          this.submitOrder(data, type);
        }
      }
    },
    submitOrder(data, type) {
      let status = this.status;
      insertOrUpdateApi(data).then(res => {
        this.$utils.updateStorage();
        this.$message.success("操作成功！");
        if (["add", "orderAdd"].includes(this.pageType)) {
          this.pageType = "edit";
          this.formData = res.data;
          this.attachSetting.businessId = res.data.id;
          if (type == "submit") {
            this.$utils.addOperateLog(
              this.formData.id,
              "新增并提交-让步接收单"
            );
            this.showFlowDialog = true;
          } else {
            this.$utils.addOperateLog(this.formData.id, "新增-让步接收单");
            this.changeRouter();
          }
        } else if (status == "DRAFT" && type == "submit") {
          this.$utils.addOperateLog(this.formData.id, "修改并提交-让步接收单");
          this.showFlowDialog = true;
        } else {
          this.$utils.addOperateLog(this.formData.id, "修改-让步接收单");
        }
        this.getDetails(res.data.id);
        this.saveAttachFile();
      });
    },
    changeRouter() {
      /* 修改路由参数 */
      this.$router.push({
        query: {
          id: this.formData.id
        }
      });
    },
    // 选择工单
    selectOrders() {
      this.showWorkOrder = false;
      let data = this.$refs.defectOrders.getSelectData();
      let { id, title, code, deptManageName, deptManage, orderType } = data;
      if (this.dialogType == "order") {
        this.selectOrder = data;
        this.associatedTitle = title;
        this.orderCode = code;
        this.orderId = id;
        this.$refs.basicForm.setFormItem("orderCode", code);
        /* 设备所属部门 */
        this.$refs.basicForm.setFormItem("deptManageName", deptManageName);
        this.$refs.basicForm.setFormItem("deptManage", deptManage);
        this.$refs.basicForm.setFormItem("deptManageArr", deptManage);
        let deptOption = this.$utils.getOptionData(
          deptManageName,
          deptManage,
          "0"
        );
        this.$refs.basicForm.setItemOption("deptManageName", deptOption);
      } else if (this.dialogType == "question") {
        this.questionCode = code;
        this.$refs.basicForm.setFormItem("questionId", code);
      }
    },
    //删除
    deleteData() {
      //对数据来源进行判断
      this.$confirm(`是否确认删除`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteApi(this.formData.id).then(res => {
            this.$utils.updateStorage();
            this.$message.success("操作成功");
            //删除相应的附件
            this.$refs.attachFile.deleteTypeFiles();
            this.$refs.editPage.closePage();
          });
        })
        .catch(e => {});
    },
    saveAttachFile() {
      this.$refs.attachFile.save();
    }, //用户输入工单标题
    userInputTitle(val) {
      if (["", null].includes(val) || val.match(/^[ ]*$/)) {
        this.userInput = false;
      } else {
        this.userInput = true;
      }
    },
    //失去焦点
    loseFocus() {
      if (
        ["", null].includes(this.orderTitle) ||
        this.orderTitle.match(/^[ ]*$/)
      ) {
        if (this.associatedTitle) {
          this.$message.warning("标题不能为空，已为您自动生成标题！");
          this.orderTitle = this.associatedTitle + "让步接收";
          this.showInput = false;
        } else {
          this.showInput = true;
        }
      } else {
        this.showInput = false;
      }
    },
    //编辑标题
    editTitle() {
      this.showInput = true;
      setTimeout(() => {
        this.$refs.mark.focus();
      }, 0);
    },
    //工作流提交成功之后
    workFlowSuccess() {
      this.showFlowDialog = false;
      if (this.$refs.workFlow) {
        this.$refs.workFlow.getFlowInfo();
      }
      this.$utils.updateStorage();
      this.getDetails();
    },
    chooseOrder(type) {
      this.dialogType = type;
      this.showWorkOrder = true;
    },
    //删除表格的数据
    async deletRow(row, num) {
      let listArr = [];
      //获取当前作业准备的表格信息，不进行校验
      let workListData = await this.$refs.preventTable.getTableData(false);
      workListData.map((i, index) => {
        if (index != num) {
          i.editable = true;
          listArr.push(i);
        }
      });
      this.$refs.preventTable.setTableData(listArr);
    },
    //显示缺陷工单详情
    async showOrder() {
      if (this.selectOrder.id) {
        let { id, orderType } = this.selectOrder;
        let routerName = null;
        if (orderType == "defect") {
          //缺陷
          routerName = "defectOrderDetails";
        } else if (orderType == "maintain") {
          //维护
          routerName = "normalMaintenanceDetails";
        } else if (orderType == "repair") {
          //检修
          routerName = "planRepairDetails";
        } else if (orderType == "overhaul") {
          //大修
          routerName = "overhaulDetails";
        } else if (orderType == "experiment") {
          //试验
          routerName = "experimentOrderDetails";
        }
        let { href } = this.$router.resolve({
          name: routerName,
          query: {
            id: id
          }
        });
        window.open(href, "_blank");
      } else {
        this.$message.warning("未保存工单ID或工单不存在！");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.concessionAcceptDetails {
  background-color: #ffffff;
  .TitleImg {
    margin-right: 2px;
    font-size: 22px;
  }
  .redLine {
    /deep/.el-input__inner {
      border: 1px solid red !important;
    }
  }
  .orderTitle {
    height: 60px;
    margin: 0 0 10px 0;
    .tipText {
      color: #cecece;
      text-align: left;
    }
    .name {
      font-size: 18px;
      padding: 0 10px;
      height: 40px;
      font-weight: bold;
      line-height: 40px;
      text-align: left;
      padding: 0 10px;
    }
    .name-input {
      width: 600px;
      height: 40px;
      line-height: 40px;
    }
    .remindColor {
      /deep/.el-input__inner {
        border: 1px solid red !important;
      }
    }
  }
  .attachConten {
    display: flex;
    flex-flow: wrap nowrap;
    .redPoint {
      color: red;
    }
    .attachTitle {
      width: 135px;
      text-align: right;
      margin-right: 10px;
    }
    .tebleDiv {
      width: 100%;
    }
  }
  .input-link /deep/.el-input__inner {
    cursor: pointer;
    color: royalblue;
  }
}
</style>